<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    :disabled="!userId>0"
                    @click="handleAdd"
                    >新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    >解绑</el-button>
                </el-col>
            </el-row>
        </div>
        
        <el-table v-loading="loading" :data="bindSchoolData"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="学校名称" align="center" prop="schoolName" :show-overflow-tooltip="true"/>
            <el-table-column label="有效时间" align="center" prop="effectiveDate" >
                <template slot-scope="scope">
                    <el-date-picker style="width: 150px;" v-if="scope.row.isEdit"
                        v-model="scope.row.effectiveDate"
                        type="date"
                        value-format="yyyy-MM-dd" 
                        placeholder="选择日期">
                    </el-date-picker>
                    <span v-else>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" 
                        icon="el-icon-check" v-if="scope.row.isEdit"
                        @click="handleEdit(scope.row)">提交</el-button>
                    <el-button size="mini" type="text" 
                        icon="el-icon-edit" v-else
                        @click="handleEdit(scope.row)">更改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增学校对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="560px" append-to-body>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="选择地区">
                            <el-cascader 
                                @change="handleGetSchoolList"
                                style="width: 100%;"
                                v-model="region"
                                :props="{value:'label',label:'label'}"
                                :options="regionOptionsAll"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="学校" prop="schoolId">
                            <el-select 
                                multiple 
                                style="width: 100%" 
                                v-model="form.schoolId" 
                                placeholder="选择学校" clearable>
                                <el-option
                                    v-for="item in schoolData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="有效日期" prop="effectiveDate">
                            <el-date-picker 
                                style="width: 100%"
                                v-model="form.effectiveDate" 
                                value-format="yyyy-MM-dd" 
                                type="date"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
import { listSchool } from "@/api/school/school.js"
import { listBindSchool, bindSchool, setValidDate } from "@/api/screener/screener.js"
import { regionDataAllOption } from '@/config/region-shandong.js'
export default {
    data() {
        return {
            // 遮罩层
            loading: false,
            //筛查人员userId
            userId: undefined,
            bindSchoolData: [],
            //地域数组
            regionOptionsAll: regionDataAllOption,
            multiple: true,
            region:['青岛市', '全部'],
            //新增学校
            open: false,
            form: {},
            title: '',
            //学校查询参数
            queryParams: {
                province: '',
                city: '',
                district: '',
            },
            schoolData: [],
            // 表单校验
            rules: {
                schoolId: [
                    { required: true, message: "学校不能为空", trigger: "blur" }
                ]
            }
        }
    },
    mounted() {
        //获取全部学校列表
        this.handleGetSchoolList()
    },
    methods: {
        //获取全部学校列表
        handleGetSchoolList() {
            // console.log(this.queryParams)
            let region = this.region;
            this.queryParams.province = '山东省';
            this.queryParams.city = region[0]||'';
            this.queryParams.district = (region[1]||'').replace('全部', '');
            listSchool(this.queryParams).then(res => {
                this.schoolData = res.data
            })
        },
        //查询筛查人员已绑定的学校
        handleGetBindSchool(userId) {
            // console.log(obj.userId)
            this.userId = userId
            listBindSchool({ userId }).then(res => {
                // console.log(res)
                res.data.records.forEach(ele => {
                    ele.isEdit = false
                });
                // console.log(res.data.records)
                this.bindSchoolData = res.data.records
            })
        },
        //绑定学校
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    bindSchool(this.form).then(response => {
                        this.$modal.msgSuccess("成功");
                        this.open = false;
                        this.handleGetBindSchool(this.userId);
                    });
                }
            });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.noticeId)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "绑定学校";
        },
        /**解除绑定 */
        handleDelete(studentObj) {
            delStudentById({ id: studentObj.id }).then(res => {
                this.$modal.msgSuccess("删除成功");
                this.handleList();
            })
        },
        handleEdit(row) {
            row.isEdit = !row.isEdit
            console.log(row)
            if(!row.isEdit) {
                setValidDate({ id: row.id, effectiveDate: row.effectiveDate }).then(res => {
                    this.$modal.msgSuccess("更新成功");
                })
            }
        },
        reset() {
            this.form = {
                userId: this.userId,
                schoolId: [],
                effectiveDate: ''
            };
            this.resetForm("form");
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .table-header{
        display: flex;
        justify-content: space-between;
    }
</style>